<template name="username">
	<section class="rc-old full-page color-tertiary-font-color" style="{{#with backgroundUrl}}background-image: url('{{.}}'){{/with}}">
		<div class="wrapper">
			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
				<header>
					<h2>{{_ "Username_title"}}</h2>
					<p>{{_ "Username_description"}}</p>
				</header>
				{{#if username.error}}
					<div class="alert error-color error-background error-border">
						{{{_ "error-field-unavailable" field=username.escaped}}}
					</div>
				{{/if}}
				{{#if username.invalid}}
					<div class="alert error-color error-background error-border">
						{{{_ "Username_invalid" username.escaped}}}
					</div>
				{{/if}}
				{{#if username.empty}}
					<div class="alert error-color error-background error-border">
						{{{_ "Username_cant_be_empty"}}}
					</div>
				{{/if}}
				<div class="fields">
					<div class='input-text active'>
						{{#if username.ready}}
							<span>
								<input type="text" name='username' id="username" value="{{username.username}}" dir="auto" class="rc-input__element" placeholder="{{_ 'Username'}}"/>
							</span>
							<i></i>
						{{else}}
							{{_ "Loading_suggestion"}}
						{{/if}}
					</div>
				</div>

				{{#if username.ready}}
					<div class="rc-button__group rc-button__group--vertical">
						<button data-loading-text="{{_ " Please_wait "}}..." class='rc-button rc-button--primary login'>{{_ "Use_this_username"}}</button>
						<button type="reset" class='rc-button rc-button--nude'>{{_ "Logout"}}</button>
					</div>
				{{/if}}
			</form>
		</div>
	</section>
</template>
